<template>
<div class="author">
  <!-- <Header :bgcolor="'rgba(0,0,0,.8)'" /> -->

  <div class="border-bot">
    <div class="flex product-module module-show margin-xauto">
      <div
        v-for="(nav, ix) in navs"
        :key="ix"
        @click="handleClick(nav)"
        class="product-module-item hand"
        :style="activeName == nav.name ? styleObj: ''"
      >{{nav.label}}</div>
    </div>
  </div>

  <div class="module-show margin-xauto min-h900">
    <AuthorList :list="list" v-if="list.length>0" />
    <div class="null pac" v-else>暂无数据</div>
  </div>

  <div class="module-show margin-xauto tac product-page">
    <el-pagination
      :total="count"
      v-if='count'
      @current-change="handlePageChange"
      :current-page.sync='opts.pageIndex'
      :page-size='opts.pageSize'
      size='small'
      background
      layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>

  <Aside />

  <Footer />

</div>
</template>

<script>
export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    AuthorList: _ => import('@/components/common/AuthorList'),
    Aside: _ => import('@/components/common/Aside'),
  },
  data() {
    return {
      activeName: '1',
      navs: [
        {label: '全部作者', name: '1'},
        // {label: '认证作者', name: '2'},
      ],
      styleObj: {
        borderColor: $globalconfig.THEME_COLOR,
        color: $globalconfig.THEME_COLOR,
      },
      opts: {
        pageIndex: 1,
        pageSize: 10,
      },
      tags: [],
      tagActive: -1,
      list: [],
      count: 0,
    }
  },
  methods: {
    // 切换分类
    handleClick(val) {
      this.activeName = val.name
      this.tagActive = -1
      this.opts.pageIndex = 1
      this.getList()
    },
    // 翻页
    handlePageChange(val) {
      this.getList()
    },
    // 获取列表
    getList() {
      this.$api.getAuthorList(this.opts).then(res => {
        if (res.code == 100) {
          if (res.data && res.data.list && res.data.list.length > 0) {
            this.list = res.data.list
            this.count = res.data.count
          } else {
            this.list = []
            this.count = 0
          }
        }
      })
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="stylus" scoped>
.author
  margin-top 70px
  width 100%
  .module-show
    width 1200px
  .product-page
    padding-top 10px
    padding-bottom 50px
  .border-bot
    border-bottom 1px solid #eeeeee
    .product-module
      .product-module-item
        font-size 15px
        padding 0 20px
        height 40px
        line-height 40px
        color #666
        margin-right 15px
        border-bottom 2px solid rgba(0,0,0,0)
</style>
